import { useState, useImperativeHandle, forwardRef, createRef, useCallback } from "react";

//父组件
function App03() {
	const ref = createRef();
	const ChildWithRef = forwardRef(Child, ref);
	const onClick = () => {
		console.log(ref, ref.current.value);
	};
	return (
		<div className="App">
			<div>这是第三种用法：使用forwardRef转发挂载到函数子组件中的dom</div>
			<ChildWithRef ref={ref} />
			<button onClick={onClick}>请点击 查看console</button>
		</div>
	);
}

//子组件
const Child = (props, ref) => {
	const [content, setContent] = useState("");
	const onChange = useCallback((e) => {
		setContent(e.target.value);
	}, []);

	return <input value={content} ref={ref} onChange={onChange} />;
};

export default App03;
